<script setup>
import {ref} from 'vue';
import {TaskTypes} from "../../js/common.js";
import {get} from "../../js/http.js";

const emit = defineEmits(['close','save'])

let cronTip = ref("")

// 定义 props
const props = defineProps({
  currentTask: {
    type: Object,
    required: true
  },
  indexData: {
    type: Object,
    required: true
  },

});

function cronCheck(e){
  if(e.target.value.length > 0){
    get("/admin/task/checkCron",{cron:e.target.value}).then(res => {
      if(res.success){
        cronTip.value = res.result
      }else {
        cronTip.value = res.message
      }
    }).catch(error => console.log(error))
  }
}
</script>

<template>
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card" style="width:960px">
      <header class="modal-card-head">
        <p class="modal-card-title">任务设置</p>
        <button class="delete" aria-label="close" @click="emit('close')"></button>
      </header>
      <section class="modal-card-body">
        <!--索引设置 Begin-->
        <div v-if="currentTask">
          <div class="field">
            <label class="label">任务名称</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="" v-model="currentTask.name">
            </div>
            <span class="help is-success">名称只能是英文</span>
          </div>

          <div class="field">
            <label class="label">任务类型</label>
            <div class="control is-expanded">
              <div class="select is-fullwidth is-link">
                <select v-model="currentTask.type">
                  <option>选择数据库</option>
                  <option v-for="(value,key) in TaskTypes" :value="key">{{key}}</option>
                </select>
              </div>
            </div>
          </div>

          <div class="field">
            <label class="label">索引</label>
            <div class="control">
              <div class="select is-fullwidth is-link">
                <select v-model="currentTask.indexName">
                  <option v-for="item in indexData" :value="item.name">{{item.name}}</option>
                </select>
              </div>
            </div>
            <span class="help is-success">例子：pes</span>
          </div>
          <div class="field">
            <label class="label">表达式（CRON）</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="*" v-model="currentTask.cron" @input="cronCheck">
            </div>
            <span class="help is-success">Cron表达式解释：{{cronTip}}</span>
          </div>
          <div class="field">
            <label class="label">SQL语句</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="*" v-model="currentTask.dbsql">
            </div>
          </div>
        </div>
        <!--索引设置 End-->
      </section>
      <footer class="modal-card-foot is-flex is-justify-content-flex-end">
        <div class="buttons">
          <button class="button is-link" @click="emit('save')">保存</button>
        </div>
      </footer>
    </div>
  </div>

</template>

<style scoped>

</style>